<template>
  <div class="container">
    <div class="coupon-list">
      <div
        v-for="(item, index) in couponList"
        :class="{ 'coupon-cell': true, disabled: item.is_lose === 1 }"
      >
        <div class="main-text">
          <div class="price">￥{{ item.minus.split(".")[0] }}</div>
          <div class="condition">满{{ item.meet }}可用</div>
        </div>
        <div class="coupon-info">
          <div class="title">
            {{ item.coupon_name }}
          </div>
          <div class="expire">{{ item.stop_at.split(" ")[0] }}前有效</div>
        </div>
        <button
          @click="useCoupon(item, index)"
          :disabled="item.is_lose === 1"
          :class="{ 'btn-disabled': item.is_lose === 1 }"
        >
          {{ item.is_lose === 0 ? "去使用" : "已失效" }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { getUserCoupon } from "@/api/profile";
export default {
  data() {
    return {
      couponList: []
    };
  },
  computed: {},
  methods: {
    useCoupon(item, index) {
      switch (item.type) {
        case 0:
          this.$router.push("/mall");
          break;
        case 1:
          this.$router.push("/item-list/" + item.scope);
          break;
        case 2:
          this.$router.push("/item-detail/" + item.scope);
          break;
      }
    }
  },
  created() {
    getUserCoupon().then(res => {
      if (res.status === 200) {
        this.couponList = res.data.data;
      }
    });
  },
  components: {}
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100%;
  height: auto;

  .coupon-list {
    padding: 0.48rem;

    .coupon-cell {
      overflow: hidden;
      height: 3.8rem;
      background-image: url("../../assets/我的优惠券-assets/1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
      overflow: hidden;
      display: flex;
      margin-bottom: 0.48rem;

      .main-text {
        width: 28%;
        text-align: center;
        color: rgba(255, 255, 255, 1);

        .price {
          font-size: 1rem;
          margin: 0.7rem 0 0.5rem 0;
        }

        .condition {
          color: rgba(255, 255, 255, 1);
          font-size: 0.58rem;
        }
      }

      .coupon-info {
        width: 50%;
        padding: 0.6rem 3.2%;

        .title {
          color: rgba(68, 68, 68, 1);
          font-size: 0.58rem;
          height: 1.6rem;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 行数*/
          -webkit-box-orient: vertical;
        }

        .expire {
          color: rgba(153, 153, 153, 1);
          font-size: 0.48rem;
          margin-top: 0.4rem;
        }
      }

      button {
        position: absolute;
        display: inline-block;
        background: rgba(248, 88, 89, 1);
        height: 1rem;
        border-radius: 0.5rem;
        line-height: 1rem;
        color: #fff;
        font-size: 0.48rem;
        border: none;
        padding: 0 0.24rem;
        right: 3.5%;
        top: 1.4rem;
      }

      .btn-disabled {
        background: rgba(204, 204, 204, 1);
      }
    }

    .disabled {
      background-image: url("../../assets/我的优惠券-assets/21.png");
    }
  }
}
</style>
